<template>
  <Header />
  <div class="container">
    <div class="textButton">
      <div class="title1">{{ info.publicInfo.wenan_top }}</div>
      <div class="title2">{{ info.publicInfo.wenan }}</div>
      <div class="title3">
        {{ info.publicInfo.wenan_foot }}
      </div>
      <div class="buttons" v-if="getLogin">
        <div class="button1" @click="navTo(false)">账号登录</div>
        <div class="button2" @click="navTo(true)">账号注册</div>
      </div>
    </div>
    <div class="content">
      <div
        class="list"
        :class="index == 0 ? 'listLeft' : ''"
        v-for="(item, index) in info.list"
        :key="index"
        @click="navToList(item, index)"
      >
        <img :src="item.img" width="80" alt="" />
        <div class="text">{{ item.text }}</div>
        <div class="listButton">立即前往 <DoubleRightOutlined /></div>
      </div>
      <Footer />
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, ref } from "vue";
import { DoubleRightOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { imgUrl } from "@/api/https.js";
import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";
import homeicon1 from "@/assets/image/homeicon1.png";
import homeicon2 from "@/assets/image/homeicon2.png";
import homeicon3 from "@/assets/image/homeicon3.png";
import homeicon4 from "@/assets/image/homeicon4.png";

export default defineComponent({
  setup() {
    const info = reactive({
      list: [
        {
          img: homeicon1,
          text: "考试说明",
        },
        {
          img: homeicon2,
          text: "报名缴费",
        },
        {
          img: homeicon3,
          text: "准考证查询",
        },
        {
          img: homeicon4,
          text: "考试成绩查询",
        },
      ],
      publicInfo: JSON.parse(localStorage.getItem("publicInfo")),
    });
    const router = useRouter();
    const getLogin = ref(true);
    const navTo = (type) => {
      router.push({
        path: "Login",
        query: {
          type,
        },
      });
    };
    const navToList = (item, index) => {
      if (!localStorage.getItem("token"))
        return router.push({
          name: "Login",
        });

      router.push({
        name: "Index",
        query: {
          title: item.text,
          type: index,
        },
      });
    };

    onMounted(() => {
      localStorage.getItem("token")
        ? (getLogin.value = false)
        : (getLogin.value = true);
    });
    return {
      info,
      navTo,
      navToList,
      imgUrl,
      getLogin,
    };
  },
  components: {
    DoubleRightOutlined,
    Footer,
    Header,
  },
});
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  padding: 10px;
  max-width: var(--maxMargin);
  margin: 0 auto;
}
.container {
  min-height: var(--homeContainerHeight);
  position: relative;
  background-image: url(../../assets/image/home1.png);
  background-position: top var(--homeContainerRight);
  background-size: auto 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
  & > img {
    width: 100%;
    min-width: 1300px;
    min-height: 500px;
  }
  .textButton {
    width: 100%;
    max-width: calc(var(--maxMargin) - 150px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 20px;

    div {
      cursor: pointer;
    }

    .title1 {
      font-size: 1.375rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      max-width: 650px;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .title2 {
      font-size: 3.125rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      max-width: 700px;
      -webkit-line-clamp: 1;
      margin-top: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }

    .title3 {
      font-size: 1.25rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 30px;
      max-width: 650px;
      -webkit-line-clamp: 2;
      margin-top: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }

    .buttons {
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      div {
        width: 175px;
        height: 53px;
        border-radius: 27px;
        font-size: 1.25rem;
        font-weight: 500;
        text-align: center;
        line-height: 48px;
        box-sizing: border-box;
        transition: all 0.5s;
      }
      .button1 {
        background: #ffffff;
        color: #554de5;
        border: 2px solid #fff;
      }
      .button1:hover {
        background-color: #554de5;
        color: #fff;
      }
      .button2 {
        background: #554de5;
        border: 2px solid #ffffff;
        color: #ffffff;
        line-height: 48px;
        margin-left: 40px;
      }
      .button2:hover {
        background-color: #fff;
        color: #554de5;
        border: 2px solid #554de5;
      }
    }
  }
  .content {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, var(--homeContentTop));
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--homeContentJustify);
    align-items: center;
    width: 100%;
    max-width: var(--homeContentWidth);

    .list {
      margin-top: 20px;
      margin-left: 20px;
      width: 23%;
      min-width: 270px;
      height: 270px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url(../../assets/image/homebj.png);
      background-position: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      transition: all 0.3s;
      cursor: pointer;
      div {
        margin-top: 20px;
        line-height: 1;
        font-size: 1.25rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        transition: all 0.5s;
      }
      img {
        width: 80px;
      }
      .listButton {
        font-size: 0.85rem;
        color: transparent;
        transition-delay: 0.3s;
        transform: translateY(-100%);
        cursor: pointer;
      }
      .listButton:hover {
        color: #554de5;
        font-size: 1rem;
      }
    }
    .list:hover {
      transform: translateY(-15%);
    }
    .list:hover .listButton {
      color: #999;
      transform: translateY(0%);
    }
    .listLeft {
      // margin-left: 0px;
    }
  }
}
</style>
